<template>
    <div class="user-page">

        <!--        头部用户信息-->
        <div class="user-page-info">
            <el-row>
                <!--                    头像-->
                <el-col :span="5">
                    <div class="avatar">
                        <span style="opacity: 0">1</span>
                        <img class="avatar-img" :src="user.avatar" alt="">
                    </div>
                </el-col>
                <!--                其他信息-->
                <el-col :span="19">
                    <div class="user-info">
                        <!--                        左边用户昵称等信息-->
                        <div class="user-info-left">

                            <!--                            用户名等信息-->
                            <div class="username">
                                <span class="username-span">
                                    {{user.username}}
                                </span>
                                <span class="role diner" v-if="user.role.roleId === 1">{{user.role.roleName}}</span>
                                <span class="role chef" v-if="user.role.roleId === 2">{{user.role.roleName}}</span>
                                <span class="role store" v-if="user.role.roleId === 3">{{user.role.roleName}}</span>
                                <GradeImg :grade="user.grade"/>
                            </div>

                            <!--                            粉丝数等信息-->
                            <div class="other-info">
                                <div class="info-item">
                                    <span class="info-num">{{user.viewNum}}</span><span class="info-text">被访问</span>
                                </div>
                                <div class="line"></div>
                                <div class="info-item">
                                    <span class="info-num">{{user.articleNum}}</span><span class="info-text">文章</span>
                                </div>
                                <div class="line"></div>
                                <div class="info-item">
                                    <span class="info-num">{{user.fanNum}}</span><span class="info-text">粉丝</span>
                                </div>
                            </div>

                        </div>
                        <!--                       右边按钮 -->
                        <div class="user-info-right">
                            <el-button type="warning" v-if="diner !== account" round> 私 聊</el-button>
                            <el-button type="danger" v-if="diner !== account" round> 关 注</el-button>
                        </div>
                    </div>

                    <div class="no-important-info">
                        <span>加入芬享时间：{{user.registerTime | format('YYYY-MM-DD')}}</span>
                    </div>

                    <!--                    个人描述-->
                    <div class="user-desc">
                        <p>个人简介：{{( user.descri===null ||user.descri==="" )?'暂无简介':user.descri}} </p>
                    </div>

                </el-col>
            </el-row>
        </div>

        <!--     文章等列表   -->
        <div class="user-page-article">
            <el-row :gutter="20">
                <el-col :span="16">
                    <el-tabs v-model="activeName" style="background-color: white;padding: 5px 10px;min-height: 250px">
                        <el-tab-pane label="最近" name="first">
                            <MomentList/>
                        </el-tab-pane>
                        <el-tab-pane label="Mark" name="second">
                            <MarkList/>
                        </el-tab-pane>
                        <el-tab-pane label="收藏" name="third">收藏</el-tab-pane>
                        <el-tab-pane label="关注" name="fourth">关注</el-tab-pane>
                        <el-tab-pane label="粉丝" name="fifth">粉丝</el-tab-pane>
                    </el-tabs>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">2</div>
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>
    import GradeImg from "@/components/GradeImg"
    import MomentList from "./components/MomentList";
    import MarkList from "./components/MarkList";

    import {getUserInfo} from "@/api/common/common"

    import {mapGetters} from 'vuex'

    export default {
        name: 'Diner',
        data() {
            return {
                diner: "",
                user: {
                    role: {}
                },
                activeName: 'first'
            };
        },
        computed: {
            ...mapGetters([
                'account',
            ]),
        },
        methods: {
            /**
             * 获取当前用户信息
             */
            getUserInfo() {
                getUserInfo(this.diner).then(res => {
                    let user = res.data
                    if (user.role.roleId !== 1) {
                        this.$router.push("/404")
                        return
                    }
                    document.title = user.username + "的主页"
                    this.user = user
                }).catch(error => {
                    this.$router.push("/404")
                })
            }
        },
        mounted() {
            this.diner = this.$route.params.id
            this.getUserInfo()
        },
        components: {
            GradeImg,
            MomentList,
            MarkList
        }
    }
</script>

<style scoped lang='less'>
    .user-page {
        padding: 8vh 2vw 10vh 2vw;

        .user-page-info {
            background-color: white;
            padding: 10px 20px;
            min-height: 200px;

            .no-important-info {
                font-size: 14px;
                color: #909399;
                margin-top: 10px;
            }

            .user-desc {
                margin-top: 15px;
                font-size: 14px;
                color: #909399;
                line-height: 20px;
            }

            .user-info {
                display: flex;

                .user-info-right {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .user-info-left {
                    flex: 1;

                    .other-info {
                        display: flex;
                        height: 30px;

                        .line {
                            width: 1px;
                            height: 20px;
                            background-color: #EBEEF5;
                            margin: 0 20px;
                        }

                        .info-item {
                            .info-num {
                                font-weight: 700;
                                font-size: 20px;
                                margin-right: 7px;
                            }

                            .info-text {
                                font-weight: 400;
                                font-size: 14px;
                            }
                        }
                    }

                    .username {
                        display: flex;
                        align-items: center;
                        height: 50px;

                        .role {
                            font-size: 12px;
                            margin: 0 10px;
                            padding: 5px 10px;
                            border-radius: 5px;
                            color: white;
                        }

                        .diner {
                            background-color: #409EFF;
                        }

                        .chef {
                            background-color: #E6A23C;
                        }

                        .store {
                            background-color: #F56C6C;
                        }

                        .username-span {
                            font-size: 25px;
                            font-weight: 500;
                            color: #303133;
                        }

                        .grade-img {
                            cursor: pointer;
                            margin-left: 5px;
                            width: 25px;
                            height: 25px;
                        }
                    }
                }
            }

            .avatar {
                position: relative;

                .avatar-img {
                    width: 130px;
                    height: 130px;
                    position: absolute;
                    border-radius: 50%;
                    border: 3px solid #E4E7ED;
                    top: -35px;
                    left: 50px;
                }
            }
        }


        .user-page-article {
            margin-top: 20px;
        }
    }
</style>